<template>
  <div class="tp-box">
    <a-drawer
      :visible="props.vvvisible"
      :width="props.width"
      :closable="props.closable"
      :destroyOnClose="props.destroyOnClose"
      @close="handleClose"
    >
      <template #title>
        <div class="title-detail">
          <Tooltip placement="top">
            <template #title>
              <span>{{ getTipTitle }}</span>
            </template>
            <h3>{{ getTitle }}</h3>
          </Tooltip>
          <a-space direction="vertical" :size="12">
            <!-- <a-range-picker v-model:value="value4" :format="dateFormat" /> -->
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </template>
      <div class="card-container">
        <a-tabs v-model:activeKey="activeKey" type="card">
          <a-tab-pane key="1" tab="自查记录">
            <a-table
              :columns="zc_computedTableColumn"
              :data-source="zc_computedCheckTableDataList"
              :page-size-options="pageSizeOptions"
              :loading="loading"
              bordered
              :pagination="false"
              size="middle"
              :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
            />
            <div class="pagination">
              <a-pagination
                show-size-changer
                v-model:current="pageIndex"
                v-model:pageSize="pageSize"
                :total="total"
                @show-size-change="onShowSizeChange"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="检查记录">
            <a-table
              :columns="jc_computedTableColumn"
              :data-source="jc_computedCheckTableDataList"
              :page-size-options="pageSizeOptions"
              :loading="loading"
              bordered
              :pagination="false"
              size="middle"
              :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
            />
            <div class="pagination">
              <a-pagination
                show-size-changer
                v-model:current="pageIndex"
                v-model:pageSize="pageSize"
                :total="total"
                @show-size-change="onShowSizeChange"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-drawer>
    <VillageDetail
      v-model:vvvvisible="vvvisible"
      title="抽屉标题"
      :width="1000"
      :detailTableHeight="detailTableHeight"
      :vclosable="true"
      :vdestroyOnClose="true"
      :data="vvvvdetailData"
      :vvvvvdetailParams="vvvvdetailParams"
      :vvvvcurrentTitle="vvvv_currentTitle"
      @close="handleVillageDetailClose"
    >
      <!-- <p>抽屉内容</p> -->
    </VillageDetail>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip } from 'ant-design-vue';
  import { ref, computed, onMounted, watch } from 'vue';
  import { getCheckInfoApi, getCheckHousrInfoApi } from '/@/api/demo/system';
  import VillageDetail from '../component/hdetail.vue';
  // 表格的 ref Dom名称
  const vvvisible = ref(false);
  const activeKey = ref('1');
  let vvvvdetailData = ref<any[]>([]);
  let vvvvdetailParams = ref({}); // 详情参数
  let detailTableHeight = ref<number>(600); // 表格高度
  let tableHeight = ref<number>(600); // 表格高度
  let vvvv_currentTitle = ref({});
  // 默认传过来的值q
  const props = defineProps({
    vvvisible: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    detailTableHeight: {
      type: Number,
      default: 600,
    },
    hzfs: {
      type: String,
      default: '',
    },
    closable: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    vvvdetailParams: {
      type: Object,
      default: () => {},
    },
    currentXzqdmname: {
      type: String,
      default: '',
    },
    vvvcurrentTitle: {
      type: String,
      default: '',
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
  });
  let pageIndex = ref(1);
  let pageSize = ref(15);
  let loading = ref(false);
  const pageSizeOptions = ref<string[]>(['100', '200', '300']);
  let zcTableSource = ref<any>([]);
  let jcTableSource = ref<any>([]);
  let total = ref(0);
  const zc_columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'hzxm' },
	    ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'address'},
	    ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '自查时间',
      dataIndex: 'pcsj',
      key: 'pcsj',
      align: 'center',
      width: 100,
    },
    {
      title: '有无隐患',
      dataIndex: 'yhzt',
      key: 'yhzt',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let style = '';
        if (row.yhzt == '已自查无隐患') {
          style = 'color: green;';
        } else if (row.yhzt == '已自查有隐患') {
          style = 'color: red;';
        }
        return {
          style: style,
        };
      },
    },
    {
      title: '隐患个数',
      dataIndex: 'yhnum',
      key: 'yhnum',
      align: 'center',
      width: 100,
    },
    {
      title: '是否整改',
      dataIndex: 'zgzt',
      key: 'zgzt',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let style = '';
        if (row.zgzt == '已整改') {
          style = 'color: green;';
        } else if (row.zgzt == '未整改') {
          style = 'color: red;';
        }
        return {
          style: style,
        };
      },
    },
    {
      title: '整改个数',
      dataIndex: 'zgnum',
      key: 'zgnum',
      align: 'center',
      width: 100,
    },
    {
      title: '自查详情',
      dataIndex: 'cz',
      key: 'cz',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            console.log('点击事件');
            getDetailData(row, index, column, isNoHzyh, isNoZero);
          },
        };
      },
    },
  ];
  const jc_columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'hzxm' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'address'},
	    ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '检查时间',
      dataIndex: 'pcsj',
      key: 'pcsj',
      align: 'center',
      width: 100,
    },
    {
      title: '有无隐患',
      dataIndex: 'yhzt',
      key: 'yhzt',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let style = '';
        if (row.yhzt == '已检查无隐患') {
          style = 'color: green;';
        } else if (row.yhzt == '已检查有隐患') {
          style = 'color: red;';
        }
        return {
          style: style,
        };
      },
    },
    {
      title: '隐患个数',
      dataIndex: 'yhnum',
      key: 'yhnum',
      align: 'center',
      width: 100,
    },
    {
      title: '是否整改',
      dataIndex: 'zgzt',
      key: 'zgzt',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let style = '';
        if (row.zgzt == '已整改') {
          style = 'color: green;';
        } else if (row.zgzt == '未整改') {
          style = 'color: red;';
        }
        return {
          style: style,
        };
      },
    },
    {
      title: '整改个数',
      dataIndex: 'zgnum',
      key: 'zgnum',
      align: 'center',
      width: 100,
    },
    {
      title: '检查详情',
      dataIndex: 'cz',
      key: 'cz',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            console.log('点击事件');
            getJcDetailData(row, index, column, isNoHzyh, isNoZero);
          },
        };
      },
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const zc_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = zc_columns;
    return newColumn;
  });
  const zc_computedCheckTableDataList = computed(() => {
    return zcTableSource.value;
  });


 // 计算属性，用于实时更新数据到页面上
 const jc_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = jc_columns;
    return newColumn;
  });
  const jc_computedCheckTableDataList = computed(() => {
    return jcTableSource.value;
  });

  const getTitle = computed(() => {
    // let str = `【${props.currentXzqdmname} 】-- props.detailParams.titlename
    console.log('******参数*3333334*****', props);
    let str = props.vvvcurrentTitle;
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    return str;
  });
  const getTipTitle = computed(() => {
    let str = `${props.vvvcurrentTitle}`;
    return str;
  });
  watch(
    () => props.vvvisible,
    (newVal, oldVal) => {
      // console.log(`visible 变化了，新值：${newVal}，旧值：${oldVal}`);
      // 在这里执行你需要的操作
      if (newVal) {
        getRecordTableData();
      }
    },
  );
 
//自查记录
  const getRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      ...props.vvvdetailParams,
    };
    loading.value = true;
    let res = await getCheckInfoApi(params);
    loading.value = false;
    let list = res.items;
    zcTableSource.value = list;
    total.value = res.total;
  };
//检查记录
  const getCheckRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      ...props.vvvdetailParams,
    };
    loading.value = true;
    let res = await getCheckHousrInfoApi(params);
    loading.value = false;
    let list = res.items;
    jcTableSource.value = list;
    total.value = res.total;
  };
  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);

  const getDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
        ...props.vvvdetailParams,
      };
      vvvvdetailParams.value = params;
      let current: any = {
        title: row.fwbh + '【' + row.pcsj + '】的自查情况',
        xzq: row.xzq,
        id: row.base_id,
        category: '自查',
      };
      console.log('*******参数*************', current);
      vvvv_currentTitle.value = current;
      showDeatailDrawer();
    }
  };
  const getJcDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
        ...props.vvvdetailParams,
      };
      vvvvdetailParams.value = params;
      let current: any = {
        title: row.fwbh + '【' + row.pcsj + '】的检查情况',
        xzq: row.xzq,
        id: row.base_id,
        category: '检查',
      };
      console.log('*******参数*************', current);
      vvvv_currentTitle.value = current;
      showDeatailDrawer();
    }
  };
  // 打开抽屉
  function showDeatailDrawer() {
    vvvisible.value = true;
  }
  const handleClose = () => {
    emit('close');
    pageIndex.value = 1;
    pageSize.value = 15;
    vvvisible.value = false;
  };
  const handleVillageDetailClose = () => {
    vvvisible.value = false;
  };
  // 切换页码的时候更新  pageIndex 和  pageSize
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    // pageIndex.value = pageIndex;
    // pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  watch(pageSize, () => {
    // console.log('pageSize', pageSize.value);
    getRecordTableData();
  });
  watch(activeKey, ()=> {
    if (activeKey.value == '1') {
      getRecordTableData();
    } else {
      getCheckRecordTableData();
    }
    console.log('当前选中的标签的 key:', activeKey.value);
  });
  watch(pageIndex, () => {
    // console.log('current', pageIndex.value);
    getRecordTableData();
  });
  const getTableHeight = () => {
   //  setTimeout(() => {
    //   // detailTableHeight.value = window.innerHeight - 182;
    //   // tableHeight.value = window.innerHeight - 292;
    //   detailTableHeight.value = window.innerHeight;
    //   tableHeight.value = window.innerHeight;
    //   // console.log(`表格高度`, tableHeight.value);
   //  });
  };
  onMounted(() => {
    getRecordTableData();
    getTableHeight();
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
  .card-container p {
    margin: 0;
  }
  .card-container > .ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -16px;
  }
  .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
    padding: 16px;
    background: #fff;
  }
  .card-container > .ant-tabs-card > .ant-tabs-nav::before {
    display: none;
  }
  .card-container > .ant-tabs-card .ant-tabs-tab,
  [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }
  .card-container > .ant-tabs-card .ant-tabs-tab-active,
  [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
    background: #fff;
    border-color: #fff;
  }
  #components-tabs-demo-card-top .code-box-demo {
    padding: 24px;
    overflow: hidden;
    background: #f5f5f5;
  }
  [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -8px;
  }
  [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }
  [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
    background: #000;
  }
  [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
    background: #141414;
  }
  [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
    background: #141414;
    border-color: #141414;
  }
</style>
